/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/// Below are the shared styles for our content pieces. Because our layout
/// changes based on whether our course menu is open or shut
/// we needed to ensure we share the right styles with these sections, but
/// still enforce different breakpoints when needed

@mixin shared-main-content {display: flex;}
@mixin shared-primary {
  flex: 1;
  // Fix Firefox and IE Edge issues with contents breaking out of flex container
  min-width: 1px;
}
@mixin shared-secondary {
  width: $ic-right-side-width;
  padding-left: $ic-sp*2;
}

$ic-left-side-width: $ic-sp*15;

body:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content {
  box-sizing: border-box;
  flex: 1;
  // Fix Firefox and IE Edge issues with contents breaking out of flex container
  min-width: 1px;
}

.ic-Layout-contentWrapper {
  box-sizing: border-box;
}

.ic-Layout-contentMain {
  padding: $ic-sp*2;

  body.is-inside-submission-frame & {
    padding-left: $ic-sp;
    padding-right: $ic-sp;
  }

  body.no-headers & {
    padding-top: 0;
  }

  body.embedded & {
    padding: 0 1em 1em;
  }

  body.ic-framed-lti-tool & {
    padding: 0 $ic-sp*2;
  }

  body.ic-full-screen-lti-tool & {
    padding: 0;
  }
}

.ic-app-main-content__secondary {
  box-sizing: border-box;
  min-width: 1px;
  padding: $ic-sp*2;
  position: relative; // note: this is also set for #right-side-wrapper in _#right-side.scss
  // prevent safari bug where content disappears on scroll
  -webkit-transform: translate3d(0, 0, 0);
}

/// Layout when the course nav IS OPEN
body.course-menu-expanded {
  &:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content {
    @include breakpoint(desktop--nav-open) { @include shared-main-content; }
  }
  &:not(.ic-no-flex-layout):not(.embedded) .ic-Layout-contentWrapper {
    @include breakpoint(desktop--nav-open) {
      @include shared-primary;
    }
  }
  .ic-app-main-content__secondary {
    @include breakpoint(desktop--nav-open) {
      @include shared-secondary;
    }
  }
}

/// Layout when the course nav IS CLOSED
body:not(.course-menu-expanded) {
  &:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-content {
    @include breakpoint(desktop) { @include shared-main-content; }
  }
  &:not(.ic-no-flex-layout):not(.embedded)  .ic-Layout-contentWrapper {
    @include breakpoint(desktop) {
      @include shared-primary;
    }
  }
  .ic-app-main-content__secondary {
    @include breakpoint(desktop) {
      @include shared-secondary;
    }
  }
}

.ic-app-footer {
  .terms-of-service__link {
    button {
      margin-top: -2px !important;
      color: $ic-brand-font-color-dark-lightened-15 !important;
    }
  }
  box-sizing: border-box;
  padding: $ic-sp 0;
  margin: 0 $ic-sp*2;
  border-top: 1px solid $ic-border-light;
  @include breakpoint(desktop) {
    display: flex;
    align-items: center;
  }
  body.modal & {
    margin: 0;
    padding: $ic-sp $ic-sp*2;
  }
}
.ic-app-footer__links {
  flex: 1;
  display: flex;
  a {
    color: $ic-font-color--subdued;
    margin-right: $ic-sp;
    @include fontSize($ic-font-size--xsmall);
  }
  @include breakpoint(desktop) {
    justify-content: flex-end;
    a { margin-right: 0; margin-left: $ic-sp; }
  }
}

.ic-app {
  box-sizing: border-box;
  min-height: 100vh;
}

.ic-Layout-wrapper {
  box-sizing: border-box;
  min-height: 100vh;

  body:not(.full-width):not(.outcomes) & {
    // We want to add a max size to most pages in canvas
    // unless it's a full-width app
    max-width: 1366px;
  }

  body:not(.ic-no-flex-layout):not(.embedded) & {
    display: flex;
    flex-direction: column;
  }

  body:not(.no-headers) & {
    margin-left: $ic-header-primary-width - 30;
  }

  body:not(.no-headers).primary-nav-expanded & {
    margin-left: $ic-header-primary-width;
  }

  body.embedded & {
    height: 100%;
  }
}

.ic-Layout-columns {
  position: relative;
  box-sizing: border-box;
  z-index: 10;

  body:not(.ic-no-flex-layout):not(.embedded):not(.is-inside-submission-frame) & {
    flex: 1 0 auto;
    // Fix Firefox and IE Edge issues with contents breaking out of flex container
    min-width: 1px;
  }

  body.course-menu-expanded:not(.ic-no-flex-layout):not(.embedded):not(.is-inside-submission-frame) & {
    margin-left: $ic-left-side-width;

    .ic-Layout-watermark {
      left: -$ic-left-side-width;
    }
  }

  body.ic-no-flex-layout & {
    min-height: 100vh;
  }

  body.no-headers &,
  body.embedded & {
    margin: 0;
    border: 0 none;
    background-color: transparent;
  }

  body.embedded & {
    min-height: 0;
    height: 100%;
  }

  // HACK workaround for IE10 and IE11 flexbox bug
  // https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { min-height: 93.5vh; }

}

.ic-Layout-watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: $ic-brand-watermark-opacity;
  background-image: $ic-brand-watermark;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.ic-app-course-menu {
  transition: transform 1s ease-in-out;
  transition-delay: 0.75s;
  transform: translate3d(0,0,0);
  box-sizing: border-box;
  position: absolute;
  top: 0; right: 100%;
  width: $ic-left-side-width;
  padding: $ic-sp*2 $ic-sp $ic-sp $ic-sp*2;
  opacity: 0;
  body.course-menu-expanded & {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  // account for the course term showing in the left-hand sub-nav
  #section-tabs-header-subtitle {
    padding: 0 0 $ic-sp $ic-sp;
  }
}

.ic-app-nav-toggle-and-crumbs {
  display: flex;
  align-items: center;
  border-bottom: 1px solid $ic-border-light;
  margin: 0 $ic-sp*2;
  padding: 16px 0;
}

.ic-app-course-nav-toggle {
  margin-right: $ic-sp;
  padding: 0;
  width: $ic-sp*3; height: ($ic-sp*3) - ($ic-sp/2);
  @include overwrite-default-icon-size(1.5rem);
  i[class*=icon-], i[class^=icon-] { margin-right: 0; }
}

.ic-app-crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
